<template>
  <div>
    <el-alert title="警告" type="warning" show-icon description="此功能为开发人员配置菜单及接口权限，非开发人员请勿随便修改，否则会导致系统及相关权限出错！">
    </el-alert>
    <div class="c-h-10p"></div>
    <list ref="list" :disabled="!$permission.can('READ')">
      <template slot="toolbar-left">
        <el-button @click="create()" type="primary" :disabled="!$permission.can('EDIT')">创建菜单</el-button>
      </template>
      <el-table-column slot="column" label="操作" fixed="right" align="center" width="100" >
        <template slot-scope="{row}">
          <el-button size="mini" type="text" icon="el-icon-plus" @click="create(row)" :disabled="row.isPage || !$permission.can('EDIT')" />
          <el-button size="mini" type="text" icon="el-icon-edit" @click="editById(row.id)" :disabled="!$permission.can('EDIT')"/>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="del(row)" :disabled="!$permission.can('EDIT')"/>
        </template>
      </el-table-column>
    </list>
    <edit-dialog ref="editDialog" @close-saved="reload" />
  </div>
</template>
<script>
import list from "@/components/sys/menu/list";
import editDialog from "@/components/sys/menu/editDialog";
import curdMixins from "@/mixins/curd";

export default {
  components: {
    list,
    editDialog
  },
  mounted() {
    this.reload();
  },
  methods: {
    reload() {
      this.$refs.list.reload();
    },
    create(row = null) {
      this.$refs.editDialog.showCreate(row);
    },
    editById(id) {
      this.$refs.editDialog.showEditById(id);
    },
    del(row) {
      this.$refs.list.delete(row).then(() => {
        this.reload();
      });
    }
  }
};
</script>